<template>
  <div class="all">
    <div class="header color">
      <Cat class="cat" />
      <Top />
    </div>
    <div class="header color">
      <InShop></InShop>
    </div>
    <div class="color">
      <Comment></Comment>
    </div>
    <div>
      <Seach></Seach>
    </div>
    <div>
      <Recommend></Recommend>
    </div>
    <div class="color">
      <Comment></Comment>
    </div>
  </div>
  <div class="bottom">
    <Bottom></Bottom>
  </div>
</template>
<script>
import Cat from '../../components/shopping/InCat'
import Top from '../../components/shopping/InTop'
import InShop from '../../components/shopping/InShop'
import Bottom from '../../components/shopping/goShopping/Bottom'
import Comment from '../../components/shopping/goShopping/Comment'
import Seach from '../../components/shopping/goShopping/Seach'
import Recommend from '../../components/shopping/goShopping/Recommend'
export default {
  data() {
    return {
      current: 0,
      resObj: {},
    }
  },
  components: {
    Cat,
    Top,
    InShop,
    Bottom,
    Comment,
    Seach,
    Recommend,
  },
  mounted() {
    this.getUrl()
    this.getlop(this.resObj.goods_id)
  },
  computed: {
    showShopInList() {
      return this.$store.state.shopIn.ShopInList
    },
  },
  methods: {
    getlop(goods_id) {
      this.$store.dispatch({
        type: 'getInList',
        goods_id,
      })
    },
    getUrl() {
      // console.log(this.$route.query.goods_id)

      const strParam = location.href.split('?', 2)[1]
      strParam.split('&').forEach((param) => {
        let arr = param.split('=')
        let key = arr[0]
        let val = arr[1]
        this.resObj[key] = val
      })
      return this.resObj
    },
  },
}
</script>
<style lang="less" scoped>
.all {
  width: 100%;
  height: 100%;
  background: RGB(244, 244, 244);
  .bottom {
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
  }
}
.color {
  background: #fff;
}
.header {
  .cat {
    z-index: 1;
    position: fixed;
    background: none;
  }
}
</style>
